<template>
	<view class="content" style="background-color: #ffffff;">
		<view class="uview-banner">
			<view class="postion">
				<u-navbar title="商城" :bgColor="navBgColor" :titleStyle="{ color: navColor }" fixed>
					<view slot="left"></view>
				</u-navbar>
			</view>
		</view>
		<view>
			<view class="contnqeraq">
				<view class=""
					style="padding: 0 20rpx;margin-top: 20rpx;width: 100%;height: 320rpx;background-color: #fff;position: fixed;z-index: 999;">
					<image @click="onstore" style="width:710rpx;height: 200rpx;" :src="mall" mode=""></image>
					<view class="tabs_1 flex-col">
						<u-tabs :list="tabs_List" lineColor="#4BA677" :activeStyle="{
							  color: '#4BA677 ',fontWeight: 'bold',
							}" :inactiveStyle="{
							  color: '#666666',
							}" itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :lineWidth="30" :current="current_Tab"
							@click="onClickTab" />
					</view>
				</view>
				<view>
					<view scroll-y="true" class="footer-55" v-if="current_Tab == 0">
						<view class="flex-align  flex-wrap" v-if="looplist.length" style="margin-bottom: 100rpx;">
							<view v-for="(item, index) in looplist" :key="index" @click="Redemption(item)"
								style="margin-left: 20rpx;width: 345rpx;background-color: #ffffff;border-radius: 10rpx;box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(8,26,26,0.3);border-radius: 12rpx;margin-bottom: 20rpx;">
								<view class="footer-44">
									<image class="footer-img" :src="item.goods_image" mode=""></image>
								</view>
								<view class="footer-name">
									{{item.goods_name}}
								</view>
								<view class="footer-jifen">
									<view class="footer-jf">
										<text class="footer-jf1">{{item.need_points}}</text>
										<text class="footer-jf2">积分</text>
									</view>
									<view class="footer-dh">
										立即兑换
									</view>
								</view>
							</view>
							<view class="addcon" style="width: 100%;height: 120rpx;"></view>
						</view>
						<view class="" v-else
							style="display: flex; justify-content: center; flex-direction: column;align-items: center;width: 100%;">
							<u-empty mode="order" :icon="icon6" text="暂无数据" />
						</view>
					</view>
					<view scroll-y="true" class="footer-55" v-if="current_Tab == 1">
						<view class="coupons">
							<!-- <view class=""
								style="position: absolute;background: rgba(0,0,0,0.6);width: 100%;height: 100%;z-index: 998;"
								v-if="onclickin"></view> -->
							<!-- <view class="scrolllist" v-if="onclickin">
								<view class="toubu">优惠券使用说明</view>
								<scroll-view scroll-y="true" class="scroll">
									<view class="lingqu">1、领取时间</view>
									<view class="xiangqing">{{resultlist.use_time}}</view>
									<view class="lingqu">2、使用时间</view>
									<view class="xiangqing">{{resultlist.use_time}}</view>
									<view class="lingqu">3、参与</view>
									<view class="xiangqing">{{resultlist.vip}}</view>
									<view class="lingqu">4、指定使用品类</view>
									<view class="xiangqing">{{resultlist.windows}}</view>
									<view class="lingqu">5、使用门槛</view>
									<view class="xiangqing">{{resultlist.man}}</view>
									<view class="lingqu">6、规则说明</view>
									<view class="xiangqing">{{resultlist.des}}</view>
								</scroll-view>
								<view class="fanhui" @click="onclickfh">
									返回
								</view>
							</view> -->
							<!-- <u-sticky>
								<u-tabs :list="tabsList" lineColor="#4BA677" :activeStyle="{
													  color: '#4BA677 ',fontWeight: 'bold',}" :inactiveStyle="{ color: '#666666',}"
									itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :lineWidth="30"
									:current="currentTab" @click="onClick_Tab" />
							</u-sticky> -->
							<!-- // q_type 平台1 场馆2 新人3 -->
							<!-- //type 代金券1 满减券2 折扣券3 -->
							<view class="coupons-list" v-if="wrapperlist.length" :class="[{ lapse: currentTab === 2 }]">
								<view v-for="(item,index) in wrapperlist" :key="index" class="coupons-item flex-between"
									@click="sav_list(item,index)">
									<view class="status pa"
										:style="{ backgroundImage: tabsList[currentTab].icon ? `url(${tabsList[currentTab].icon})` : '' }">
									</view>
									<!-- 折扣券1 -->
									<view class="left flex-center" v-if="item.type == 1">
										<view class="free" v-if="item.free">免费</view>
										<view class="text-center" v-else>
											<view>
												¥ <text class="price">{{ item.jian }}</text>
											</view>
											<text class="full">满{{ item.man }}元可用</text>
										</view>
									</view>
									<view class="right" v-if="item.type == 1">
										<view class="name">
											{{ item.name }}
										</view>
										<view class="desc">
											有效期：{{ item.use_time }}
										</view>
										<view class=""
											style="display: flex;flex-direction: row;  justify-content: space-between;">
											<view class="desc" style="color: red;" v-if="item.q_type == 1">
												平台券
											</view>
											<view class="desc" v-if="item.q_type == 2">
												场馆券
											</view>
											<view class="desc" v-if="item.q_type == 3">
												新人券
											</view>
											<view class="ada" @click="onClick_2(item,index)">
												领取
											</view>
										</view>
									</view>
									<!-- <button class="button_1 flex-col" @click="onClick_1" v-if="item.type == 1">
										<text class="text_11">立即使用</text>
									<!-- 满减券2 -->
									<view class="left flex-center" v-if="item.type == 2">
										<view class="free" v-if="item.free">免费</view>
										<view class="text-center" v-else>
											<view>
												¥ <text class="price">{{ item.jian }}</text>
											</view>
											<text class="full">满{{ item.man }}元可用</text>
										</view>
									</view>
									<view class="right" v-if="item.type == 2">
										<view class="name">
											{{ item.name }}
										</view>
										<view class="desc">
											有效期：{{ item.use_time }}
										</view>
										<view class=""
											style="display: flex;flex-direction: row;  justify-content: space-between;">
											<view class="desc" style="color: red;" v-if="item.q_type == 1">
												平台券
											</view>
											<view class="desc" v-if="item.q_type == 2">
												场馆券
											</view>
											<view class="desc" v-if="item.q_type == 3">
												新人券
											</view>
											<view class="ada" @click="onClick_2(item,index)">
												领取
											</view>
										</view>
									</view>
									<!-- 折扣券3 -->
									<view class="left flex-center" v-if="item.type == 3">
										<view class="free" v-if="item.free">免费</view>
										<view class="text-center" v-else>
											<view>
												<text class="price">{{ item.jian }}折</text>
											</view>
											<text class="full">满{{ item.man }}元可用</text>
										</view>
									</view>
									<view class="right" v-if="item.type == 3">
										<view class="name">
											{{ item.name }}
										</view>
										<view class="desc">
											有效期：{{ item.use_time }}
										</view>
										<view class=""
											style="display: flex;flex-direction: row;  justify-content: space-between;">
											<view class="desc" style="color: red;" v-if="item.q_type == 1">
												平台券
											</view>
											<view class="desc" v-if="item.q_type == 2">
												场馆券
											</view>
											<view class="desc" v-if="item.q_type == 3">
												新人券
											</view>
											<view class="ada" @click="onClick_2(item,index)">
												领取
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="" v-else style="margin-top: 80rpx;">
								<u-empty mode="coupon"
									icon="https://oss.szsportscenter.cn/img/58d1bf2665b8c20e302f02c56274f0ce972df8b4.png" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部导航组件 -->
		<tabber :active="3"></tabber>
	</view>
</template>

<script>
	const personal = require('@/api/personal/index.js')
	const train = require("@/api/train/index.js");
	const index = require('@/api/personal/index.js')
	const market = require("@/api/market/index.js");
	export default {
		data() {
			return {
				icon6: this.$https.assetsPath + '58d1bf2665b8c20e302f02c56274f0ce972df8b4.png',
				mall: this.$https.assetsPath + 'shop_mall.png',
				navBgColor: 'rgba(255, 255, 255, 0)',
				navColor: '#000000',
				tabs_List: [{
						name: "积分兑换"
					},
					{
						name: "领券中心"
					}
				],
				current_Tab: 0,
				looplist: [],
				onclickin: false,

				currentTab: 0,
				tabsList: [{
						name: '未使用'
					},
					{
						name: '已使用',
						icon: this.$https.assetsPath + 'dcf0218fded9036bea5025856404f6c159351f45.png'
					},
					{
						name: '已过期',
						icon: this.$https.assetsPath + '2e8eb51996967ced9c8480a2a2054f07ea437a0d.png'
					},
				],
				couponsList: [],
				listQuery: { //分页
					pageNo: 1,
					pageSize: 8,
				},
				totalPage: '', //几页
				wrapperlist: [],
				total: "",
				resultlist: {}
			};
		},
		onLoad(options) {
			uni.setStorageSync('openidlist', options.openidlist)
			// 获取页面设置配置
			const _this = this;
			// 获取学员资料
			let params = {
				app_id: this.$https.weixinAppId,
			}
			personal.getProjectIdByAppId(params).then(result => {
				getApp().globalData.projectId = result.data.result
				getApp().globalData.sign = result.data.sign;
				let that = this;
				// 查询对应小程序的配置信息
				that.getAppletConfig();
				that.showCoupons()
			})
		},

		methods: {
			onClick_2(item, index) {
				let datas = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync("openid"),
					coupon_id: item.id
				};
				market.insertCouponRecord(datas).then(result => {
					if (result.code == 1) {
						uni.showToast({
							title: result.info,
							icon: 'exception',
							duration: 850
						});
					} else {
						uni.showToast({
							title: result.info,
							icon: 'exception',
							duration: 850
						});
					}
				})
			},
			onstore() {
				wx.navigateToMiniProgram({
					appId: 'wx1581663debd273d5',
					path: 'pages/store/store',
					extraData: {
						// 可选，传递给目标小程序的数据，具体格式自定义
					},
					envVersion: 'release', // 可选，跳转到目标小程序的版本，可选值为 develop（开发版）、trial（体验版）、release（正式版）
					success(res) {
						// 跳转成功的回调
					},
					fail(err) {
						// 跳转失败的回调
					}
				});
			},
			onClickTab({
				index
			}) {
				this.current_Tab = index;
				if (index == 1) {
					this.getCouponNew()
				} else {
					this.showCoupons()
				}
			},
			// 列表循环
			async showCoupons() {
				let params = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					limit: 10,
					page: 1,
					open_id: uni.getStorageSync('openid'),
				}
				let res = await train.getProduct(params)
				if (res.code === 1) {
					this.looplist = res.data.result.data
				}
			},
			Redemption(item) {
				uni.navigateTo({
					url: '../../page_points/page_points/redemption_details?id=' +
						item.id
				})
			},
			async getAppletConfig() {
				let that = this;
				let data = {
					weixinAppId: this.$https.weixinAppId,
					projectId: getApp().globalData.projectId,
				};
				let result = await index.index(data);
				if (result.code == 1) {
					that.homeData = result.data; // 首页完整数据
					uni.setStorageSync("applet_icon", result.data.applet_icon);
					uni.setStorageSync("applet_name", result.data.name);
				}
			},
			//场馆详情
			StoreDetaillist(im) {
				uni.navigateTo({
					url: "/page_points/storeDetail/storeDetail?id=" + im.id,
				});
			},

			onclickfh() {
				this.onclickin = false
			},
			sav_list(item, index) {
				this.getCouponDetail(item.id)
				this.onclickin = true
			},
			async getCouponDetail(id) {
				let postData = {
					id: id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await market.getCouponDetail(postData);
				if (res.code == 1) {
					this.resultlist = res.data.result
				}
			},
			async getCouponNew() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.wrapperlist = [];
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync('openid'),
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
					status: this.currentTab,
					venue_id: '',
					window_id: '',
				}
				let res = await market.getCouponNew(postData);
				if (res.code == 1) {
					that.wrapperlist = that.wrapperlist.concat(res.data.result.data); //将数据拼接在一起
					that.totalPage = res.data.result.last_page
				}
			},
			// 滚动加载
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.pageNo) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.getCouponNew()
			},

			onClick_Tab({
				index
			}) {
				this.listQuery.pageNo = 1
				this.currentTab = index;
				this.wrapperlist = []
				this.getCouponNew()
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import url("@/static/css/index/index.css");

	.contnqeraq {
		width: 100%;
		height: auto;
		border-radius: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		margin-top: 10vh;
		position: relative;

		.footer-55 {
			// padding: 10rpx 10rpx 10rpx 10rpx;
			flex-wrap: wrap;
			display: flex;
			flex-direction: row;
			width: 100vw;
			height: auto;
			position: absolute;
			top: 340rpx;
			background-color: #fff;

			.footer-44 {
				width: 100%;
				height: 200rpx;
				border-radius: 12rpx;

				.footer-img {
					width: 345rpx;
					height: 200rpx;
					border-radius: 12rpx 12rpx 0 0;
				}
			}

			.footer-name {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				line-height: 33rpx;
				margin-top: 20rpx;
				color: #333333;
				font-size: 28rpx;
			}

			.footer-jifen {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				color: #333333;

				.footer-jf {
					margin-left: 20rpx;

					.footer-jf1 {
						font-size: 32rpx;
						font-weight: 700;
						color: #DAA472;
					}

					.footer-jf2 {
						font-size: 20rpx;
						color: #DAA472;
					}
				}

				.footer-dh {
					width: 100rpx;
					height: 30rpx;
					background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
					border-radius: 15rpx;
					color: #fff;
					font-size: 20rpx;
					text-align: center;
					line-height: 30rpx;
					margin-right: 20rpx;
				}
			}

			.coupons {
				width: 100%;
				min-height: 100%;
				background-color: #EDF5F5;
				padding-bottom: env(safe-area-inset-bottom);
				position: relative;
				margin-bottom: 100rpx;

				.scrolllist {
					position: fixed;
					z-index: 999;
					color: #000000;
					width: 80%;
					height: 50%;
					background-color: #fff;
					left: 10%;
					top: 20%;
					border-radius: 10rpx;

					.fanhui {
						width: 30%;
						height: 80rpx;
						background: linear-gradient(0deg, #4BA677, #4BA677);
						border-radius: 40rpx;
						text-align: center;
						line-height: 80rpx;
						color: #fff;
						margin: 0 auto;
						font-size: 30rpx;
						margin-top: 10rpx;
						position: absolute;
						bottom: 20rpx;
						left: 35%;
					}

					.toubu {
						width: 100%;
						height: 50rpx;
						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
						text-align: center;
						margin-top: 10rpx;
						position: absolute;
						top: 10rpx;
					}

					.scroll {
						position: absolute;
						z-index: 999;
						color: #000000;
						width: 100%;
						height: 36vh;
						background-color: #fff;
						left: 0;
						top: 70rpx;
						border-radius: 10rpx;

						.lingqu {
							color: rgba(224, 37, 27, 1);
							font-size: 28rpx;
							text-align: left;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 100%;
							height: 40rpx;
							line-height: 40rpx;
							margin-left: 20rpx;
							margin-top: 20rpx;
						}

						.xiangqing {
							width: 97%;
							height: auto;
							overflow-wrap: break-word;
							color: rgba(0, 0, 0, 1.0);
							font-size: 28rpx;
							font-weight: 500;
							text-align: left;
							line-height: 34rpx;
							margin: 10rpx 0 0 20rpx;
							padding-right: 20rpx;
						}
					}
				}

				/deep/.u-tabs {
					background-color: #fff;

					.u-tabs__wrapper__nav__item {
						flex: 1;
					}
				}

				.coupons-list {
					padding: 20rpx 10rpx;

					&.lapse {
						.left {
							color: #bebebe;
						}
					}
				}

				.coupons-item {
					background-color: #fff;
					border-radius: 16rpx;
					padding: 40rpx 0;
					position: relative;
					overflow: hidden;

					&::before,
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						background-color: #EDF5F5;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						transform: translateY(-50%);
					}

					&::before {
						left: 0;
						transform: translate(-50%, -50%);
					}

					&::after {
						right: 0;
						transform: translate(50%, -50%);
					}

					&+.coupons-item {
						margin-top: 20rpx;
					}

					.status {
						top: -30rpx;
						right: 30rpx;
						width: 116rpx;
						height: 116rpx;
						background-position: left top;
						background-repeat: no-repeat;
						background-size: 100% 100%;
					}

					.left {
						width: 240rpx;
						color: #56BF89;
						font-size: 28rpx;

						.free {
							font-size: 42rpx;
						}

						.price {
							font-size: 46rpx;
							font-weight: bold;
						}
					}

					.button_1 {
						background-color: rgba(255, 255, 255, 1);
						border-radius: 30px;
						height: 60rpx;
						border: 1px solid #56BF89;
						width: 174rpx;
						position: absolute;
						bottom: 10rpx;
						right: 10rpx;
						text-align: center;
						line-height: 60rpx;

						.text_11 {
							width: 111rpx;
							height: 60rpx;
							overflow-wrap: break-word;
							color: #56BF89;
							font-size: 28rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 60rpx;
							// margin: 17rpx 0 0 30rpx;
						}
					}

					.right {
						flex: 1;

						.name {
							color: #000;
							font-size: 32rpx;
							font-weight: bold;
						}

						.desc {
							font-size: 28rpx;
							color: #d1d1d1;
							margin-top: 10rpx;
						}

						.ada {
							width: 62px;
							height: 26px;
							background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
							border-radius: 7px;
							font-size: 12px;
							color: #FFFFFF;
							line-height: 26px;
							text-align: center;
							margin-top: 20rpx;
							margin-right: 20rpx;
						}
					}
				}
			}
		}

		.tabs_1 {
			width: 100%;
			height: 100rpx;
			padding: 0 20rpx;
			// position: fixed;
			// z-index: 999;
			// top: 390rpx;
			background-color: #fff;

			/deep/.u-tabs {
				// background-color: #fff;

				.u-tabs__wrapper__nav__item {
					flex: 1;
				}

				.u-tabs__wrapper__nav__line {
					bottom: 0;
				}
			}
		}
	}
</style>